<!--
  文件描述：
  创建时间：2023/10/16 15:13
  创建人：二
-->
<template>
  <m-dialog
    :title="title"
    :visible="visible"
    :width="width"
    :append-to-body="appendToBody"
    :close-on-click-modal="true"
    @close="close"
  >
    <el-upload
      v-loading="loading"
      class="upload-demo"
      drag
      :show-file-list="false"
      action=""
      :accept="accept"
      :before-upload="doUpload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template v-slot:tip>
        <div class="el-upload__tip ele-text-center">
          <span>只能上传{{accept}}文件, </span>
          <el-link
            v-if="templateUrl"
            :download="templateFileName"
            :href="mixinFileUrl(templateUrl)"
            type="primary"
            :underline="false"
            style="vertical-align: baseline"
          >
            下载模板
          </el-link>
        </div>
      </template>
    </el-upload>
  </m-dialog>
</template>

<script>
export default {
  name: 'MImportFile',
  props: {
    // 表题
    title: {
      type: String,
      default: '导入'
    },
    // 宽度
    width: {
      type: String,
      default: '520px'
    },
    /**
     * Dialog 自身是否插入至 body 元素上。
     * 嵌套的 Dialog 必须指定该属性并赋值为 true
     */
    appendToBody: {
      type: Boolean,
      default: false
    },
    // 文件上传类型
    accept: {
      type: String,
      default: '.xls,.xlsx'
    },
    // 文件大小
    fileSize: {
      type: Number,
      default: 5
    },
    // 模板地址
    templateUrl: {
      type: String,
      default: ''
    },
    // 上传文件方法
    importFileApi: {
      required: true
    },
    // 模板名称
    templateFileName: {
      type: String,
      default: '导入模板'
    }
  },
  data() {
    return {
      visible: false,
      loading: false
    }
  },
  methods: {
    // 打开弹窗
    open() {
      this.visible = true;
    },
    // 关闭弹窗
    close() {
      if(!this.loading) {
        this.visible = false
      }
    },
    // 上传
    doUpload(file) {
      if (file.size / 1024 / 1024 > 5) {
        this.$message.error('大小不能超过 5MB');
        return false;
      }
      this.loading = true;
      this.importFileApi({
        file: file
      }).then(() => {
        this.$message.success('导入成功');
        this.$emit('success', true);
      }).finally(() => {
        this.loading = false;
      })
      return false;
    }
  }
}
</script>

<style scoped>
  .upload-demo {
    text-align: center;
  }
</style>
